<template>
  <div>
    <h1>获取所有的影院</h1>
    <div class="box">
        <div class="item" v-for="(item,index) in list" :key="index">
            <div class="item-img">
                <img :src="item.img_src" alt="">
            </div>
            <div class="item-title">
                <span>{{item.name}}</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script lang='ts'>
import {ref,reactive,onBeforeMount} from 'vue'
import api from '../api/index'
import {ITheatres} from '../types/index'
export default{
 setup(){
  let list =ref<Array<ITheatres>>([])
  onBeforeMount(async()=>{
    const {data:{places}}=await api.theatres.getAllTheatres();
    list.value=places
  });
  return{list}
 }
}
</script>

<style lang='scss' scoped>
    .box{
        display: flex;
        flex-wrap: wrap;
        width: 1400px;
        height: 800px;
        background-color: yellow;
        .item{
            width: 200px;
            height: 300px;
            background-color: red;
            border-radius: 15px;
            margin:10px;
            .item-img{
                img{
                    width: 200px;
                    height: 200px;
                }
            }
            .item-title{
                color: white;
            }
        }
    }
</style>